<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <el-container class="fm2-container">
        <el-main class="fm2-main">
            <el-container>
                <el-container class="center-container" direction="vertical">
                    <el-header class="btn-bar" style="height: 45px;">
                        <el-button type="primary" icon="el-icon-plus" circle
                                   style="float: left; font-size: 16px; margin: 8px; padding: 5px;"></el-button>
                        <slot name="action">
                        </slot>
                        <el-button v-if="upload" type="text" size="medium" icon="el-icon-upload2" @click="handleUpload">
                            导入JSON
                        </el-button>
                        <el-button v-if="clearable" type="text" size="medium" icon="el-icon-delete"
                                   @click="handleClear">清空
                        </el-button>
                        <el-button v-if="preview" type="text" size="medium" icon="el-icon-view" @click="handlePreview">
                            预览
                        </el-button>
                        <el-button v-if="generateJson" type="text" size="medium" icon="el-icon-tickets"
                                   @click="handleGenerateJson">生成JSON
                        </el-button>
                        <el-button v-if="generateCode" type="text" size="medium" icon="el-icon-document"
                                   @click="handleGenerateCode">生成代码
                        </el-button>
                    </el-header>
                    <el-main ref="centermain" :class="{'widget-empty': widgetForm.list.length == 0}">

                        <vxe-grid
                                ref="xGrid"
                                border
                                resizable

                                align="center"
                                v-if="hackReset"
                                :height="gridHight"
                                remote-filter
                                :pager-config="table.Page"
                                :proxy-config="table.Proxy"
                                :columns="table.Column"
                                :toolbar="table.toolbar"
                                @header-cell-click="headerClick">
                            <template v-slot:header>
                                <div>adsafewejksl</div>
                            </template>
                        </vxe-grid>

                        <!--            <widget-table v-if="!resetJson"  ref="widgetForm" :data="widgetForm" :select.sync="widgetFormSelect"></widget-table>-->
                    </el-main>
                </el-container>

                <el-aside class="widget-config-container">
                    <el-container>
                        <el-header height="45px">
                            <div class="config-tab" :class="{active: configTab=='widget'}"
                                 @click="handleConfigSelect('widget')">字段属性
                            </div>
                            <div class="config-tab" :class="{active: configTab=='form'}"
                                 @click="handleConfigSelect('form')">表单属性
                            </div>
                        </el-header>
                        <el-main class="config-content">
                            <widget-config v-show="configTab=='widget'" :data="widgetFormSelect"></widget-config>
                            <form-config v-show="configTab=='form'" :data="widgetForm.config"></form-config>
                        </el-main>
                    </el-container>

                </el-aside>

                <cus-dialog
                        :visible="previewVisible"
                        @on-close="previewVisible = false"
                        ref="widgetPreview"
                        width="1000px"
                        form
                >
                    <generate-form insite="true" v-if="previewVisible" :data="widgetForm" :value="widgetModels"
                                   :remote="remoteFuncs" ref="generateForm">

                        <template v-slot:blank="scope">
                            宽度：
                            <el-input v-model="scope.model.blank.width" style="width: 100px"></el-input>
                            高度：
                            <el-input v-model="scope.model.blank.height" style="width: 100px"></el-input>
                        </template>
                    </generate-form>

                    <template slot="action">
                        <el-button type="primary" @click="handleTest">获取数据</el-button>
                        <el-button @click="handleReset">重置</el-button>
                    </template>
                </cus-dialog>

                <cus-dialog
                        :visible="uploadVisible"
                        @on-close="uploadVisible = false"
                        @on-submit="handleUploadJson"
                        ref="uploadJson"
                        width="800px"
                        form
                >
                    <el-alert type="info" title="JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可"></el-alert>
                    <div id="uploadeditor" style="height: 400px;width: 100%;">{{jsonEg}}</div>
                </cus-dialog>

                <cus-dialog
                        :visible="jsonVisible"
                        @on-close="jsonVisible = false"
                        ref="jsonPreview"
                        width="800px"
                        form
                >

                    <div id="jsoneditor" style="height: 400px;width: 100%;">{{jsonTemplate}}</div>

                    <template slot="action">
                        <el-button type="primary" class="json-btn" :data-clipboard-text="jsonCopyValue">复制数据</el-button>
                    </template>
                </cus-dialog>

                <cus-dialog
                        :visible="codeVisible"
                        @on-close="codeVisible = false"
                        ref="codePreview"
                        width="800px"
                        form
                        :action="false"
                >
                    <div id="codeeditor" style="height: 500px; width: 100%;">{{htmlTemplate}}</div>
                </cus-dialog>
            </el-container>
        </el-main>
        <el-footer height="30px" style="font-weight: 600;">Powered by <a target="_blank"
                                                                         href="https://github.com/GavinZhuLei/vue-form-making">GavinZhuLei</a>
        </el-footer>
    </el-container>

</template>

<script>
    import Draggable from 'vuedraggable'
    import WidgetConfig from './WidgetConfig'
    import FormConfig from './FormConfig'
    import WidgetTable from './WidgetTable'
    import CusDialog from './CusDialog'
    import GenerateForm from './GenerateForm'
    import Clipboard from 'clipboard'

    import {basicComponents, layoutComponents, advanceComponents} from './componentsConfig.js'
    import {loadJs, loadCss} from '@/utils/index.js'
    import request from '@/utils/request.js'
    import generateCode from './generateCode.js'
    import Sortable from 'sortablejs'
    export default {
        name: 'fm-making-table',
        components: {
            Draggable,
            WidgetConfig,
            FormConfig,
            WidgetTable,
            CusDialog,
            GenerateForm
        },
        props: {
            preview: {
                type: Boolean,
                default: false
            },
            generateCode: {
                type: Boolean,
                default: false
            },
            generateJson: {
                type: Boolean,
                default: false
            },
            upload: {
                type: Boolean,
                default: false
            },
            clearable: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                gridHight: 300,
                table: {
                    toolbar: {},
                    Page: {},
                    Proxy: {},
                    Column: [
                        {type: 'index', width: 50 ,highlightHoverColumn:true},
                        {
                            field: 'name',columnKey:true, title: 'app.body.label.name', filters: [
                                {label: 'a', value: '1'},
                                {label: 'a', value: '1'}
                            ], filterMultiple: true,
                            filterRender: {name: 'el-input'},
                            slots:{
                                default: () => {
                                    return '555';
                                },
                                header: ({column,columnIndex,$columnIndex,fixed,isHidden}) => {
                                    return '+++'+ column.title;
                                },

                            }
                        },
                        {field: 'sex',columnKey:true, title: 'app.body.label.sex', showHeaderOverflow: true},
                        {field: 'address',columnKey:true, title: 'Address', showOverflow: true}
                    ]
                },
                basicComponents,
                layoutComponents,
                advanceComponents,
                resetJson: false,
                widgetForm: {
                    list: [],
                    config: {
                        labelWidth: 100,
                        labelPosition: 'right',
                        size: 'small'
                    },
                },
                configTab: 'widget',
                hackReset: true,
                widgetFormSelect: null,
                previewVisible: false,
                jsonVisible: false,
                codeVisible: false,
                uploadVisible: false,
                remoteFuncs: {
                    func_test(resolve) {
                        setTimeout(() => {
                            const options = [
                                {id: '1', name: '1111'},
                                {id: '2', name: '2222'},
                                {id: '3', name: '3333'}
                            ]

                            resolve(options)
                        }, 2000)
                    },
                    funcGetToken(resolve) {
                        request.get('http://tools-server.xiaoyaoji.cn/api/uptoken').then(res => {
                            resolve(res.uptoken)
                        })
                    },
                    upload_callback(response, file, fileList) {
                        console.log('callback', response, file, fileList)
                    }
                },
                widgetModels: {},
                blank: '',
                htmlTemplate: '',
                jsonTemplate: '',
                uploadEditor: null,
                jsonCopyValue: '',
                jsonClipboard: null,
                jsonEg: `{
  "list": [
    {
      "type": "input",
      "name": "单行文本",
      "icon": "icon-input",
      "options": {
        "width": "100%",
        "defaultValue": "",
        "required": false,
        "dataType": "string",
        "pattern": "",
        "placeholder": "",
        "remoteFunc": "func_1540908864000_94322"
      },
      "key": "1540908864000_94322",
      "model": "input_1540908864000_94322",
      "rules": [
        {
          "type": "string",
          "message": "单行文本格式不正确"
        }
      ]
    },
    {
      "type": "textarea",
      "name": "多行文本",
      "icon": "icon-diy-com-textarea",
      "options": {
        "width": "100%",
        "defaultValue": "",
        "required": false,
        "pattern": "",
        "placeholder": "",
        "remoteFunc": "func_1540908876000_19435"
      },
      "key": "1540908876000_19435",
      "model": "textarea_1540908876000_19435",
      "rules": []
    }
  ],
  "config": {
    "labelWidth": 100,
    "labelPosition": "top",
    "size": "small"
  }
}`
            }
        },
        mounted() {
            this.$nextTick(() => {
                console.log('grid hedht')
                // this.gridHight = document.documentElement.clientHeight - this.$refs.centermain.getBoundingClientRect().top - 90

                // alert(JSON.stringify(this.$refs['grid'].getBoundingClientRect()));
            })
        },
        methods: {
            handleGoGithub() {
                window.location.href = 'https://github.com/GavinZhuLei/vue-form-making'
            },
            handleConfigSelect(value) {
                this.configTab = value
            },
            handleMoveEnd(evt) {
                console.log('end', evt)
            },
            handleMoveStart({oldIndex}) {
                console.log('start', oldIndex, this.basicComponents)
            },
            handleMove() {
                return true
            },
            handlePreview() {
                console.log(this.widgetForm)
                this.previewVisible = true
            },
            handleTest() {
                this.$refs.generateForm.getData().then(data => {
                    this.$alert(data, '').catch(e => {
                    })
                    this.$refs.widgetPreview.end()
                }).catch(e => {
                    this.$refs.widgetPreview.end()
                })
            },
            handleReset() {
                this.$refs.generateForm.reset()
            },
            handleGenerateJson() {
                this.jsonVisible = true
                this.jsonTemplate = this.widgetForm
                console.log(JSON.stringify(this.widgetForm))
                this.$nextTick(() => {

                    const editor = ace.edit('jsoneditor')
                    editor.session.setMode("ace/mode/json")

                    if (!this.jsonClipboard) {
                        this.jsonClipboard = new Clipboard('.json-btn')
                        this.jsonClipboard.on('success', (e) => {
                            this.$message.success('复制成功')
                        })
                    }
                    this.jsonCopyValue = JSON.stringify(this.widgetForm)
                })
            },
            handleGenerateCode() {
                this.codeVisible = true
                this.htmlTemplate = generateCode(JSON.stringify(this.widgetForm))
                this.$nextTick(() => {
                    const editor = ace.edit('codeeditor')
                    editor.session.setMode("ace/mode/html")
                })
            },
            handleUpload() {
                this.uploadVisible = true
                this.$nextTick(() => {
                    this.uploadEditor = ace.edit('uploadeditor')
                    this.uploadEditor.session.setMode("ace/mode/json")
                })
            },
            handleUploadJson() {
                try {
                    this.setJSON(JSON.parse(this.uploadEditor.getValue()))
                    this.uploadVisible = false
                } catch (e) {
                    this.$message.error(e.message)
                    this.$refs.uploadJson.end()
                }
            },
            handleClear() {
                this.widgetForm = {
                    list: [],
                    config: {
                        labelWidth: 100,
                        labelPosition: 'right',
                        size: 'small',
                        customClass: ''
                    },
                }

                this.widgetFormSelect = {}
            },
            getJSON() {
                return this.widgetForm
            },
            getHtml() {
                return generateCode(JSON.stringify(this.widgetForm))
            },
            setJSON(json) {
                this.widgetForm = json

                if (json.list.length > 0) {
                    this.widgetFormSelect = json.list[0]
                }
            },
            handleInput(val) {
                console.log(val)
                this.blank = val
            },
            headerClick(data, event) {
                const {triggerResizable, triggerSort, triggerFilter, $rowIndex, column, columnIndex, $columnIndex, cell} = data
                this.widgetFormSelect = column


                console.log(JSON.stringify(this.$refs.xGrid.getColumnNode(cell)))
                // console.log(JSON.stringify(columnIndex))
                // console.log(JSON.stringify($columnIndex))
                // console.log(JSON.stringify(cell))
                // console.log(JSON.stringify(column))
            },
            columnDrop2 () {
                this.$nextTick(() => {
                    let xTable = this.$refs.xGrid
                    this.sortable = Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row'), {
                        handle: '.vxe-header--column',
                        onEnd: ({ newIndex, oldIndex }) => {
                            let currRow = this.table.Column.splice(oldIndex, 1)[0]
                            this.table.Column.splice(newIndex, 0, currRow)
                        }
                    })
                })
            }
        },
        created () {
            this.columnDrop2()
        },
        watch: {
            'widgetFormSelect': {
                deep: true,
                handler(val, oldVal) {
                    // this.$refs.xGrid.getColumnConfig()
                    // reloadColumn
                    this.hackReset = false
                    this.$nextTick(() => {
                        this.hackReset = true
                    })
                }
            },
           /* widgetForm: {
                deep: true,
                handler: function (val) {
                    // console.log(this.$refs.widgetForm)
                }
            }*/
        }
    }
</script>

<style lang="scss">
    .widget-empty {
        background: url('../assets/form_empty.png') no-repeat;
        background-position: 50%;
    }

</style>
